<template>
    <div class="home pb-6">
        <!-- 背景色 -->
        <div class="top-bg absolute h-16 -z-10 w-screen bg-gradient-to-b from-red-600 to-white overflow-hidden">
        </div>
        <!-- 搜索框 -->
        <div>
            <van-search v-model="searchField" placeholder="请输入搜索关键词" show-action shape="round" background="transparent">
                <template #action>
                    <div class="text-white flex align-center">
                        <van-icon name="shopping-cart-o" size="0.5rem" />
                    </div>
                </template>
            </van-search>
        </div>
        <!-- 主体部分 -->
        <main class="flex flex-col space-y-2 [&_h2.title]:font-bold [&_h2.title]:mb-1 [&_h2.title]:ml-4">
            <!-- 分类 -->
            <header class="w-[calc(100vw-1rem)] bg-white rounded-[0.5rem] p-1 mt-1 shadow-md self-center">
                <section class="topbar flex justify-around mb-1">
                    <div class="topbar-item flex flex-col items-center" v-for="item in topBarState" :key="item.title">
                        <div class="topbar-item__icon">
                            <van-icon :name="item.icon" size="0.9rem" />
                        </div>
                        <div class="topbar-item__text text-[0.3rem]">{{ item.title }}</div>
                    </div>
                </section>
                <van-button type="primary" block size="small" color="rgb(246,247,248)">
                    <div class="text-black flex items-center">
                        <van-icon name="apps-o" size="0.5rem" />
                        <span class="text-[0.32rem] ml-2 font-bold">所有分类</span>
                    </div>
                </van-button>
            </header>
            <!-- 导航栏 -->
            <section class="navbar flex overflow-x-scroll w-screen space-x-2 px-2 ">
                <div class="navbar-item flex flex-col border border-solid border-gray-300  rounded-lg flex-[0_0_auto] w-10"
                    v-for="item in navBarState" :key="item.title">
                    <div class="navbar-item__text text-[0.3rem] p-1 pb-0">
                        {{ item.title }}
                    </div>
                    <div class="navbar-item__icon self-end p-1">
                        <van-icon :name="item.icon" size="0.6rem" />
                    </div>
                </div>
            </section>
            <!-- 最近浏览 -->
            <section>
                <h2 class="title text-[0.4rem]">最近浏览</h2>
                <RecentlyViewCard :items="recentlyViewedState" />
            </section>
            <!-- 最新折扣 -->
            <section>
                <h2 class="title text-[0.4rem]">最新折扣</h2>
                <div class="flex w-screen overflow-x-scroll space-x-1 px-2">
                    <div class="region-item flex-[0_0_auto]" v-for="item in discountInfo" :key="item.region">
                        <div class="item-wrapper w-14 h-9 rounded-lg overflow-hidden relative">
                            <img :src="item.discounts[0].cover" alt="" />
                            <div class="item-mask absolute w-full h-full bg-black opacity-20 bottom-0"></div>
                            <div class="item-title absolute z-10 text-[0.4rem] font-bold text-white bottom-1 left-1">
                                {{ item.region }}
                            </div>
                        </div>
                    </div>
                </div>
            </section>
            <!-- 探索更多 -->
            <section>
                <h2 class="title text-[0.4rem]">探索更多</h2>
                <PromotionalList :items="promotionalList" :next="handleNextPage" />
            </section>
        </main>
    </div>
</template>

<script setup lang="ts">
import { ref, toRefs, onMounted } from "vue";
import { useHomeStore } from "@/stores/homeStore";
import { usePromotionalStore } from "@/stores/promotionalStore";
import RecentlyViewCard from "@/components/RecentlyView/RecentlyViewCard.vue";
import { useDiscountStore } from "@/stores/discountStore";
import PromotionalList from "@/components/Promotional/PromotionalList.vue";

const searchField = ref("");
const homeStore = useHomeStore();
const discountStore = useDiscountStore();
const promotionalStore = usePromotionalStore();

const currentPage = ref(1);

onMounted(async () => {
    await promotionalStore.getPromotionalList(1, 6);
});

const handleNextPage = async (setHasMore: (value: boolean) => void) => {
    // 页数+1
    currentPage.value++;
    // 模拟向后端发送请求获取第二页的数据
    const res = await promotionalStore.getPromotionalList(currentPage.value, 6);
    // 如果没有更多数据，则设置setHasMore为false
    if (!res.hasMore) {
        setHasMore(false);
    }
};

const { topBarState, navBarState, recentlyViewedState } = toRefs(homeStore);
const { discountInfo } = toRefs(discountStore);
const { promotionalList } = toRefs(promotionalStore);
</script>

<style scoped></style>
